Learning Topic 3: Early and Essential Footwork - Website Planning Background/Rationale: When beginning to develop a website, start with the 3 Ws. Why do you want to create this website? What do you want to say? What is the purpose? Who do you want to visit your site? Better yet, what do visitors want/need to find when they visit your site? Time spent answering these questions will help you to define your site and develop a strong focus. Many people have quoted (original author unknown), "If you fail to plan, you plan to fail." This is especially true for web design. There is more to creating a website than just page creation. A good amount of time goes into thinking about and planning a website -- as much and sometimes more than goes into the actual page and graphic development. Spending the time to plan will ensure a high-quality and highly usable website. Learner Outcomes: At the end of this Learning Topic, you will be able to: · Identify qualities of website design that promote exploration and usability as well as qualities that discredit or distract from a website’s value. (Field experience) · Assess how color, image choice, content style, and other elements promote a website’s major purpose or goal as well as target an intended audience. (Project 1) · Effectively organize and prioritize website content/site architecture using strategies such as sitemaps and wireframes. (Project 2 and Project 3) · Identify and construct website navigation that is efficient, intuitive, and consistent for end users. (Discussion 1 and Project 3). Readings and Research: 21 Ways Your Audience Affects Your Design. (2008, February 24). Vandelay Design. Retrieved from http://vandelaydesign.com/blog/design/audience-affects-design/ . Bona, L. R. (2009). District Website Essentials. District Administration, 45(1), 69-72. doi: Article. [Available via Academic Research Premier] or select link, http://dml.regis.edu/login?url=http://search.ebscohost.com/login.aspx?direct=true&db=aph&AN=36206078&site=ehost-live Gube, J. (2009, March 17). Breadcrumbs In Web Design: Examples And Best Practices. Smashing Magazine. Blog. Retrieved October 11, 2009, from http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/ . Learning Web Design Process: Site Structure (2009, September 25). The University of Texas at Austin. Educational website. Retrieved October 21, 2009, from http://www.utexas.edu/learn/designprocess/structure.html . Morris, T. (2009, August 4). Web Design Best Practices: Design for Your Target Audience. YouTube: Broadcast Yourself. Retrieved October 20, 2009, from http://www.youtube.com/watch?v=rtCZloFmHBo . Rodriguez, J. (2009, July 10). What’s the Plan? A Guide to Effective Website Navigation. Blueprint Design Studio. Retrieved October 20, 2009, from http://blueprintds.com/2009/07/10/whats-the-plan-a-guide-to-effective-website-navigation/ . Snell, C., & Sahlin, D. (2009). Building Websites All-in-One For Dummies (2nd ed.), Chapter 2 - Creating Effective Layouts. For Dummies. Accessible via Books24x7. NOTE: See instructions on accessing Books24x7 in the syllabus Required Course Materials section. Stocks, E. (2009). Sexy Web Design: Creating Interfaces that Work, Chapter 3 and 4 - Navigation and Interaction. SitePoint. [Accessible via Books24x7. What to Ask When Designing for a Target Audience. (2009, August 12). Addicott Web. Retrieved October 21, 2009, from http://www.addicottweb.com/2009/08/what-to-ask-when-designing-for-a-target-audience/ . Learning Activities Activity 1: Discussion – Field Experience - Identifying a Quality Website Step 1: In your field experience log, respond to the following. Interview three peers and/or educators who have either created a website or who are frequent users of the Internet. Throughout the course of each interview, ask "What makes a quality website?" Additionally, ask “What makes a viewer leave or discredit a website?” Note whether any of the following factors are mentioned and which, if any, take clear priority over the others. · Color use · Clarity of site purpose · Quality of site content · Site navigation - ease of use · Load time of site · Graphic use · Identification of audience · Layout/organization of content How are the results of your three interviews similar and/or different? Step 2: Post your responses to the Discussion Forum for this activity. Read and respond to two or more of your colleagues’ responses. Note: This field experience is necessary for Project 1 for this Learning Topic. Activity 2: Discussion 1 – Target Audiences Project 1 – Analyzing Web Design for Goal and Audience Step 1: Choose and then analyze an educational website. Using concepts found in the assigned readings for this Learning Topic, construct a Target Audience chart or graphic organizer that: 1. Identifies the site's major purpose or goal and cites evidence that confirms this. 2. Identifies the site's targeted audience and design elements (color, image choice, content style, etc.) that are representative of the targeted audience. Step 2: The facilitator may assign pairs or small groups for this activity. Post your Target Audience chart/graphic organizer in the Discussion Forum for this activity as directed by the facilitator. Step 3: Review and analyze the Target Audience chart(s). Create a collective pair/group checklist of what makes a website effective as well as web page elements that ensure a successful design. Step 4: Read and respond to two or more pairs/groups Target Audience charts. Revise your chart/graphic organizer if needed to include additional ideas gleaned from your colleagues. Activity 3: Discussion – Sitemap Creation Project 2 – Creating a Sitemap Step 1: Design a flowchart or "sitemap" for an educational website you would like to create. This website will become your second major project to be presented and evaluated during Learning Topic 8. Examples of sitemaps can be found by using Google Images. Use the terms "web design sitemaps" for your search. Step 2: Using bubbl.us , writemaps.com or other web 2.0 mind-mapping tools , create a skeletal structure for your site and all pages you intend to include. Save the sitemap as a .jpg. Ask if you need help. Step 3: Post your sitemap image to the Discussion Forum for this activity. Step 4: Review and provide feedback to two or more of your colleagues. Assessment See the Sitemap Creation Checklist Activity 4: Discussion 2– Designing for Ease of Use Step 1: Read the two separate articles by Gube and Rodriguez. Step 2: Respond to the following: · Is one type/placement of navigation better than another? · When should a designer use breadcrumb trails as a navigational aid? · Are there logical reasons for using breadcrumb trails in website design? · How important is consistency for successful user experiences? Step 3: Post your responses to the Discussion Forum for this activity. Read and respond to two or more of your colleagues. Assessment Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated. Activity 5: Discussion – Wireframe Creation Project 3 – Creating a Wireframe Using information gained from your articles and chapters on content planning/website architecture/layout, create a “wireframe” for the sitemap you created in Project 2. Remember that you can search for example web design wireframes using Google Images. When creating your wireframe, consider placement of various web page elements - your logo, navigation bar, news, events, about, and contact information, and/or any other content integral to your website’s success. Your wireframe may be a simple hand sketch or may be created with software or webware of your choice. Remember to use simple shapes and to label each web page element. Try to design your wireframe “above the fold.” Above the fold is a graphic term that means that the most important articles and/or photos appears on the upper half of the front page of a newspaper. Assessment See the Wireframe Creation Checklist Activity 6: Discussion – Sitemap and Wireframe Peer Analysis of Sitemap and Wireframe After completing Projects 2 and 3, read through your colleagues’ postings. Provide feedback to two or more colleagues on element placement, ease of navigation, and prioritization of content. Assessment Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
Background/Rationale:
When beginning to develop a website, start with the 3 Ws. Why do you want to create this website? What do you want to say? What is the purpose? Who do you want to visit your site? Better yet, what do visitors want/need to find when they visit your site? Time spent answering these questions will help you to define your site and develop a strong focus. Many people have quoted (original author unknown), "If you fail to plan, you plan to fail." This is especially true for web design. There is more to creating a website than just page creation. A good amount of time goes into thinking about and planning a website -- as much and sometimes more than goes into the actual page and graphic development. Spending the time to plan will ensure a high-quality and highly usable website.
Learner Outcomes:
At the end of this Learning Topic, you will be able to:
· Identify qualities of website design that promote exploration and usability as well as qualities that discredit or distract from a website’s value. (Field experience)
· Assess how color, image choice, content style, and other elements promote a website’s major purpose or goal as well as target an intended audience. (Project 1)
· Effectively organize and prioritize website content/site architecture using strategies such as sitemaps and wireframes. (Project 2 and Project 3)
· Identify and construct website navigation that is efficient, intuitive, and consistent for end users. (Discussion 1 and Project 3).
Readings and Research:
21 Ways Your Audience Affects Your Design. (2008, February 24). Vandelay Design. Retrieved from http://vandelaydesign.com/blog/design/audience-affects-design/
.
Bona, L. R. (2009). District Website Essentials. District Administration, 45(1), 69-72. doi: Article. [Available via Academic Research Premier] or select link, http://dml.regis.edu/login?url=http://search.ebscohost.com/login.aspx?direct=true&db=aph&AN=36206078&site=ehost-live
Gube, J. (2009, March 17). Breadcrumbs In Web Design: Examples And Best Practices. Smashing Magazine. Blog. Retrieved October 11, 2009, from http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
.
Learning Web Design Process: Site Structure (2009, September 25). The University of Texas at Austin. Educational website. Retrieved October 21, 2009, from http://www.utexas.edu/learn/designprocess/structure.html
.
Morris, T. (2009, August 4). Web Design Best Practices: Design for Your Target Audience. YouTube: Broadcast Yourself. Retrieved October 20, 2009, from http://www.youtube.com/watch?v=rtCZloFmHBo
.
Rodriguez, J. (2009, July 10). What’s the Plan? A Guide to Effective Website Navigation. Blueprint Design Studio. Retrieved October 20, 2009, from http://blueprintds.com/2009/07/10/whats-the-plan-a-guide-to-effective-website-navigation/
.
Snell, C., & Sahlin, D. (2009). Building Websites All-in-One For Dummies (2nd ed.), Chapter 2 - Creating Effective Layouts. For Dummies. Accessible via Books24x7.
NOTE: See instructions on accessing Books24x7 in the syllabus Required Course Materials section.
Stocks, E. (2009). Sexy Web Design: Creating Interfaces that Work, Chapter 3 and 4 - Navigation and Interaction. SitePoint. [Accessible via Books24x7.
What to Ask When Designing for a Target Audience. (2009, August 12). Addicott Web. Retrieved October 21, 2009, from http://www.addicottweb.com/2009/08/what-to-ask-when-designing-for-a-target-audience/
.
Learning Activities
Activity 1: Discussion – Field Experience - Identifying a Quality Website
Step 1: In your field experience log, respond to the following. Interview three peers and/or educators who have either created a website or who are frequent users of the Internet. Throughout the course of each interview, ask "What makes a quality website?" Additionally, ask “What makes a viewer leave or discredit a website?” Note whether any of the following factors are mentioned and which, if any, take clear priority over the others.
· Color use
· Clarity of site purpose
· Quality of site content
· Site navigation - ease of use
· Load time of site
· Graphic use
· Identification of audience
· Layout/organization of content
How are the results of your three interviews similar and/or different?
Step 2: Post your responses to the Discussion Forum for this activity. Read and respond to two or more of your colleagues’ responses.
Note: This field experience is necessary for Project 1 for this Learning Topic.
Activity 2: Discussion 1 – Target Audiences
Project 1 – Analyzing Web Design for Goal and Audience
Step 1: Choose and then analyze an educational website. Using concepts found in the assigned readings for this Learning Topic, construct a Target Audience chart or graphic organizer that:
1. Identifies the site's major purpose or goal and cites evidence that confirms this.
2. Identifies the site's targeted audience and design elements (color, image choice, content style, etc.) that are representative of the targeted audience.
Step 2: The facilitator may assign pairs or small groups for this activity. Post your Target Audience chart/graphic organizer in the Discussion Forum for this activity as directed by the facilitator.
Step 3: Review and analyze the Target Audience chart(s). Create a collective pair/group checklist of what makes a website effective as well as web page elements that ensure a successful design.
Step 4: Read and respond to two or more pairs/groups Target Audience charts. Revise your chart/graphic organizer if needed to include additional ideas gleaned from your colleagues.
Activity 3: Discussion – Sitemap Creation
Project 2 – Creating a Sitemap
Step 1: Design a flowchart or "sitemap" for an educational website you would like to create. This website will become your second major project to be presented and evaluated during Learning Topic 8. Examples of sitemaps can be found by using Google Images. Use the terms "web design sitemaps" for your search.
Step 2: Using bubbl.us
, writemaps.com
or other web 2.0 mind-mapping tools
, create a skeletal structure for your site and all pages you intend to include. Save the sitemap as a .jpg. Ask if you need help.
Step 3: Post your sitemap image to the Discussion Forum for this activity.
Step 4: Review and provide feedback to two or more of your colleagues.
Assessment
See the Sitemap Creation Checklist
Activity 4: Discussion 2– Designing for Ease of Use
Step 1: Read the two separate articles by Gube and Rodriguez.
Step 2: Respond to the following:
· Is one type/placement of navigation better than another?
· When should a designer use breadcrumb trails as a navigational aid?
· Are there logical reasons for using breadcrumb trails in website design?
· How important is consistency for successful user experiences?
Step 3: Post your responses to the Discussion Forum for this activity. Read and respond to two or more of your colleagues.
Assessment
Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
Activity 5: Discussion – Wireframe Creation
Project 3 – Creating a Wireframe
Using information gained from your articles and chapters on content planning/website architecture/layout, create a “wireframe” for the sitemap you created in Project 2. Remember that you can search for example web design wireframes
using Google Images. When creating your wireframe, consider placement of various web page elements - your logo, navigation bar, news, events, about, and contact information, and/or any other content integral to your website’s success. Your wireframe may be a simple hand sketch or may be created with software or webware of your choice. Remember to use simple shapes and to label each web page element. Try to design your wireframe “above the fold.” Above the fold is a graphic term that means that the most important articles and/or photos appears on the upper half of the front page of a newspaper.
Assessment
See the Wireframe Creation Checklist
Activity 6: Discussion – Sitemap and Wireframe
Peer Analysis of Sitemap and Wireframe
After completing Projects 2 and 3, read through your colleagues’ postings. Provide feedback to two or more colleagues on element placement, ease of navigation, and prioritization of content.
Assessment
Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.